<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>打印预览</title>
    <style>
        .table {
            margin: 0 auto;
            border-collapse: collapse;
            font-size: 13px;
        }

        .table, .table tr td {
            border: 1px solid black;
        }

        .table tr td {
            padding: 5px 10px;
        }

        .print-div {
            /*border: 1px solid red;*/
            height: 20.5cm;
            width: 13cm;
        }

        /* 在print-div元素前始终插入分页符 */
        @media print {
            .print-div {
                page-break-before: always;
            }
        }
    </style>
</head>
<body>
<div class="container-div">
    <div class="row">
        <div>
            <table>
                <tr>
                    <td>
                        <button type="button" onclick="doPrint()"><h4>立即打印</h4></button>
                    </td>
                    <td width="70%"></td>
                </tr>
            </table>
        </div>
        <div style="margin: 0 auto;" >
            <!--startprint-->
            <div th:each="pageMap : ${pageList}" class="print-div">
                <table width="100%" style="font-size: 13px">
                    <tr>
                        <td colspan="6">
                            <table width="100%" style="font-size: 13px;">
                                <tr style="text-align: center;">
                                    <td style="font-size: 19px" colspan="5" th:text="${hhOrder.orderType == '1' ?
                                    '进销存系统' :
                                    '进销存系统(退&nbsp;货)'}"></td>
                                </tr>
                                <tr>
                                    <td style="text-align: center;" colspan="3">水管及配件 &nbsp; 自动喷灌及配件 &nbsp; 电线及电缆等配件</td>
                                    <td style="font-size: 13px;text-align: right">单号：</td>
                                    <td style="text-align: left;" th:text="${hhOrder.orderId}" width="15%"></td>
                                </tr>
                                <tr style="text-align: center;">
                                    <td colspan="5">房屋装修配套（厅大灯、筒灯、马桶、洗手盆、油烟机等）</td>
                                </tr>
                                <tr style="text-align: center;">
                                    <td colspan="5">手机：13088888888 13088888888 &nbsp; 店铺地址：漳州市九湖镇衍后村马崎</td>
                                </tr>
                                <tr>
                                    <td width="15%">客户名称：</td>
                                    <td style="text-align: left;" th:text="${hhOrder.consumerName}"></td>
                                    <td style="text-align: left;" th:text="${hhOrder.phoneNumber}"></td>
                                    <td width="12%">日期：</td>
                                    <td th:text="${hhOrder.orderDate}" width="20%"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <table class="table" width="100%">
                            <tr style="text-align: center;font-size: 13px;">
                                <td width="10%">序号</td>
                                <td>商&nbsp;&nbsp;品&nbsp;&nbsp;名&nbsp;&nbsp;称</td>
                                <td>数&nbsp;&nbsp;量</td>
                                <td width="10%">单价</td>
                                <td width="10%">金&nbsp;&nbsp;额</td>
                            </tr>
                            <tr th:each="detailList : ${pageMap.dataList}" style="text-align: center;">
                                <td th:text="${detailListStat.index + 1}"></td>
                                <td th:text="${detailList.productName}" style="text-align: left"></td>
                                <td th:text="${detailList.productNum}"></td>
                                <td th:text="${detailList.detailPrice}"></td>
                                <td th:text="${detailList.detailAmount}"></td>
                            </tr>
                            <tr>
                                <td th:text="${hhOrder.remark == null ? '备注：' : '备注：' + hhOrder.remark}" style="text-align: left;" colspan="2"></td>
                                <td th:text="${'本页计：' + pageMap.pageAmount}" style="text-align: center;" colspan="3"></td>
                            </tr>
                        </table>
                    </tr>
                    <tr>
                        <table width="100%" style="font-size: 13px;">
                            <tr>
                                <td>
                                    <table width="100%" style="text-align: left;font-size: 13px;">
                                        <tr>
                                            <td th:text="${null == beforeBalance ? ' ' : '上单累计：' + beforeBalance}"></td>
                                            <td th:text="${thisPay == null ? ' ' : '暂付：' + thisPay}">&nbsp;</td>
                                            <td th:text="${null == afterBalance ? ' ' : '总累计：' + afterBalance}"></td>
                                        </tr>
                                        <tr>
                                            <td colspan="3">农村信用社：1234 1234 1234 1234 123</td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">农业银行：  1234 1234 1234 1234 123</td>
                                            <td>户名：chongjin</td>
                                        </tr>
                                    </table>
                                </td>
                                <td width="10%">
                                    <img width="80px" height="80px" class="codeImg" src="">
                                </td>
                            </tr>
                        </table>
                    </tr>
                </table>
            </div>
            <!--endprint-->
        </div>
    </div>
</div>
<script>
    function doPrint() {
        bdhtml = window.document.body.innerHTML;
        sprnstr = "<!--startprint-->"; //开始打印标识字符串有17个字符
        eprnstr = "<!--endprint-->"; //结束打印标识字符串
        prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17); //从开始打印标识之后的内容
        prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
        window.document.body.innerHTML = prnhtml; //把需要打印的指定内容赋给body.innerHTML
        window.print(); //调用浏览器的打印功能打印指定区域
        window.document.body.innerHTML = bdhtml;//重新给页面内容赋值；
        return false;
    }
</script>
</body>
</html>
